<template>
	<view style="width: 100%;">
		<view class="change-top">
			城市切换
			<img @click="back" src="@/static/img/common_btn_return_n.png" alt="">
		</view>
		<view class="current-city">
			<view>当前选择</view>
			<view class="city_select">
				{{city}}
			</view>
		</view>
		<hr />
		<view class="all-city">
			已开通城市
			<view>
				<view class="city_item" @click='checkCity(item.name)' v-for='item in city_list' :key='item.id' type="primary" round>{{item.name}}</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	let _this;

	export default {
		data() {
			return {
				from: '',
				city: '',
				city_list: []
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.city = option.city; //打印出上个页面传递的参数。
		},
		created() {
			_this = this;
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		mounted() {

			this.get_list();
		},
		methods: {
			checkCity(name) {
				try {
				    uni.setStorageSync('city', name);
				} catch (e) {
				    // error
				}
				this.back();

			},
			back(){
				uni.navigateBack({
				    delta: 1
				});
			},
			get_list() {
				uni.request({
					url: this.$store.state.ip + 'admin/sysProvince/findPage', //仅为示例，并非真实接口地址。
					data: JSON.stringify({
						"limit": "1000",
						"page": "1"
					}),
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.city_list = res.data.data.list;
						} else if (res.data.code == '040081') {

							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})

							console.log(res);
						}


					},
					fail: (res) => {
						console.log(res);
					}
				});
			},


		}

	}
</script>

<style>
	.city_select{
		background-color: #ff6816 !important;
		float: left;
		border-radius: 15px;
		padding: 5px 15px;
		margin-top: 10px;
		color: #fff;
	}
	.city_item{
		background-color: #F0F1F5;
		float: left;
		border-radius: 15px;
		padding: 5px 15px;
		margin-right: 10px;
		margin-top: 10px;
	}
	.change-top {
		font-size: 16px;
		color: #35374b;
		text-align: center;
		height: 80px;
		line-height: 100px;
	}

	.change-top img {
		position: absolute;
		left: 0px;
		top: 26px;
		padding: 12px;
	}

	.change-top img:active {
		background-color: #eee;
	}

	.current-city {
		font-size: 16px;
		color: #242533;
		padding-left: 12px;
		margin: 20px 0;
		overflow: auto;
	}

	.current-city .el-button,
	.all-city .el-button {
		background-color: #edeef2;
		border: none;
		height: 35px;
		padding: 0 15px;
		color: #595a66;
		margin-top: 17px;
	}

	/* .el-button {
			margin: 10px 10px 0 0;
		} */

	hr {
		height: 10px;
		background-color: #f2f4f7;
		border: none;
		margin-top: 12px;
	}

	.all-city {
		padding: 18px 0 0 12px;
		font-size: 16px;
		color: #242533;
	}

	.all-city .el-button:hover {
		background-color: #1869e0;
		color: #fff;
	}
</style>
